<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站</title>
    <link rel="shortcut icon" href="/images/favicon/favicon.ico" type="image/x-icon">
    <!-- 采用html , css , js 分开写的原则
    这里属于自己写的 css 部分 -->
    <link rel="stylesheet" href="/css/General style.css">
    <link rel="stylesheet" href="/css/header.css">
    <link rel="stylesheet" href="/css/iconfont.css">
    <link rel="stylesheet" href="/css/slideshow.css">
    <link rel="stylesheet" href="/css/home-hero.css">
    <link rel="stylesheet" href="/css/home-main.css">
    <link rel="stylesheet" href="/css/footer.css">
    <!-- 根据窗口大小动态的改变工具栏的样式，以及大小 -->
    <link rel="stylesheet" href="/css/subbar.css" media="all and (max-width:1499.99999px)">   <!-- 媒体查询1 -->
    <link rel="stylesheet" href="/css/subbar2.css" media="all and (min-width:1500px)">  <!-- 媒体查询2 -->
</head>

<body>  
    <!-- 采用html , css , js 分开写的原则
    这里属于自己写的 html 部分 -->
    <!-- 头部 -->
    <div th:replace="header::top"></div>
    <!-- home 首页导航-->
    <div class="home-hero w">
        <!-- 轮播图 -->
        <div class="slideshow">
            <ul class="sli-ul">
                <li>
                    <a href="#">
                        <img src="./images/img/05.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/img/02.jpeg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/img/03.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/img/04.jpeg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/img/01.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/img/05.jpg" alt="">
                    </a>
                </li>
            </ul>
            <div class="sli-box">
                <a href="javaScript:;"></a>
                <a href="javaScript:;"></a>
                <a href="javaScript:;"></a>
                <a href="javaScript:;"></a>
                <a href="javaScript:;"></a>
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <!-- sub 下-->
        <div class="home-sub clearfix">
            <div class="sub-l fl">
                <ul class="l-list clearfix">
                    <li>
                        <a href="#">
                            <img src="images/h-01.png" alt=""> 小米秒杀
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/h-02.png" alt=""> 企业团购
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/h-03.png" alt=""> F码通道
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/h-04.png" alt=""> 米粉卡
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/h-05.png" alt=""> 以旧换新
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/h-06.png" alt=""> 话费充值
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sub-r fl">
                <ul class="r-list clearfix">
                    <li class="first">
                        <a href="#">
                            <img src="images/r-01.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/r-02.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/r-03.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- home-main首页主体 -->
    <div class="home-main">
        <div class="container w">
            <!-- 小米秒杀 -->
            <div class="home-flashsale">
                <div class="box-hd">
                    <h2 class="title">小米秒杀</h2>
                </div>
                <div class="box-bd">
                    <div class="row clearfix">
                        <div class="flashsale-countdown fl">
                            <div class="round">
                                14:00 场
                            </div>
                            <img src="images/lightning" alt="">
                            <div class="desc">
                                距离结束还有
                            </div>
                            <div class="countdown clearfix">
                                <span></span>
                                <i>:</i>
                                <span></span>
                                <i>:</i>
                                <span></span>
                                <i></i>
                            </div>
                        </div>
                        <div class="flashsale-list fl">
                            <ul class="swiper-wrapper">
                                <!-- 1 -->
                                <li class="swiper-slide rainbow-item-1">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-01.webp" alt="小米全面屏电视E32C 灰色 32英寸" width="160" height="160">
                                            </div>
                                            <h3 class="title">小米全面屏电视E32C 灰色 32英寸</h3>
                                            <p class="desc">全面屏设计，人工智能系统</p>
                                            <p class="price">
                                                <span>799</span>元
                                                <del>999元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <!-- 2 -->
                                <li class="swiper-slide rainbow-item-2">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-02.webp" alt="米家天然乳胶护颈枕S 灰色" width="160" height="160">
                                            </div>
                                            <h3 class="title">米家天然乳胶护颈枕S 灰色</h3>
                                            <p class="desc">大颗粒释压体验，升级好睡眠</p>
                                            <p class="price">
                                                <span>189</span>元
                                                <del>249元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <!-- 3 -->
                                <li class="swiper-slide rainbow-item-3">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-03.webp" alt="Pro 15增强版 i5" width="160" height="160">
                                            </div>
                                            <h3 class="title">Pro 15增强版 i5</h3>
                                            <p class="desc">再次突破强大</p>
                                            <p class="price">
                                                <span>4999</span>元
                                                <del>5899元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <!-- 4 -->
                                <li class="swiper-slide rainbow-item-4">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-04.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">
                                            </div>
                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>
                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>
                                            <p class="price">
                                                <span>1249</span>元
                                                <del>1499元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <!-- 5 -->
                                <li class="swiper-slide rainbow-item-5">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-05.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">
                                            </div>
                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>
                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>
                                            <p class="price">
                                                <span>1249</span>元
                                                <del>1499元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <!-- 6 -->
                                <li class="swiper-slide rainbow-item-6">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-06.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">
                                            </div>
                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>
                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>
                                            <p class="price">
                                                <span>1249</span>元
                                                <del>1499元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <!-- 7 -->
                                <li class="swiper-slide rainbow-item-7">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-07.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">
                                            </div>
                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>
                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>
                                            <p class="price">
                                                <span>1249</span>元
                                                <del>1499元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <!-- 8 -->
                                <li class="swiper-slide rainbow-item-8">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-08.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">
                                            </div>
                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>
                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>
                                            <p class="price">
                                                <span>1249</span>元
                                                <del>1499元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <!-- 9 -->
                                <li class="swiper-slide rainbow-item-9">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-09.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">
                                            </div>
                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>
                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>
                                            <p class="price">
                                                <span>1249</span>元
                                                <del>1499元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <!-- 10 -->
                                <li class="swiper-slide rainbow-item-10">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-10.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">
                                            </div>
                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>
                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>
                                            <p class="price">
                                                <span>1249</span>元
                                                <del>1499元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <!-- 11 -->
                                <li class="swiper-slide rainbow-item-11">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-11.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">
                                            </div>
                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>
                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>
                                            <p class="price">
                                                <span>1249</span>元
                                                <del>1499元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <!-- 12 -->
                                <li class="swiper-slide rainbow-item-12">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-12.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">
                                            </div>
                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>
                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>
                                            <p class="price">
                                                <span>1249</span>元
                                                <del>1499元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                                <!-- 13 -->
                                <li class="swiper-slide rainbow-item-13">
                                    <a href="#">
                                        <div class="conter">
                                            <div class="thumb">
                                                <img src="images/com-06.webp" alt="米家黄麻抗菌护脊床垫 1.5米" width="160" height="160">
                                            </div>
                                            <h3 class="title">米家黄麻抗菌护脊床垫 1.5米</h3>
                                            <p class="desc">黄麻偏硬护脊 抗菌防霉无异味</p>
                                            <p class="price">
                                                <span>1249</span>元
                                                <del>1499元</del>
                                            </p>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="swiper-controls">
                            <span class="swiper-flashsale-prev">
                                <i class="iconfont btn-left">&#xe603;</i>
                            </span>
                            <span class="swiper-flashsale-next">
                                <i class="iconfont btn-right">&#xe638;</i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 广告图 -->
            <div class="home-banner-box">
                <a href="#">
                    <img src="images/bann-01.webp" alt="note 9" width="1226px" height="120">
                </a>
            </div>
            <!-- 手机 -->
            <div class="home-mobile-box">
                <!-- 上 -->
                <div class="box-hd">
                    <h2 class="title">手机</h2>
                    <div class="more">
                        <a href="#" class="more-link">
                            查看全部<i class="iconfont iconfont-arrow-right-big">&#xe638;</i>
                        </a>
                    </div>
                </div>
                <!-- 下 -->
                <div class="box-bd">
                    <div class="row clearfix">
                        <div class="mobile-left fl">
                            <ul class="mobile-left-list">
                                <li class="brick-item brick-item-l">
                                    <a href="#">
                                        <img src="images/sj-001.webp" alt="">
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="mobile-right fl">
                            <ul class="brick-list clearfix">
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/sj-01.webp" alt="">
                                        </div>
                                        <h3 class="title">小米11</h3>
                                        <p class="desc">骁龙888 | 2K四曲面屏</p>
                                        <p class="price">
                                            <span class="num">3999</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/sj-02.webp" alt="">
                                        </div>
                                        <h3 class="title">Note 9 Pro</h3>
                                        <p class="desc">一亿像素夜景相机，120Hz六档变速高刷屏</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/sj-03.webp" alt="">
                                        </div>
                                        <h3 class="title">Note 9</h3>
                                        <p class="desc">天玑 800U处理器，5000mAh电池，</p>
                                        <p class="price">
                                            <span class="num">1299</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/sj-04.webp" alt="">
                                        </div>
                                        <h3 class="title">Note 9 4G</h3>
                                        <p class="desc">6000mAh长续航</p>
                                        <p class="price">
                                            <span class="num">999</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/sj-05.webp" alt="">
                                        </div>
                                        <h3 class="title">小米10 至尊版</h3>
                                        <p class="desc">120X 变焦/120W秒充/120Hz屏幕</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/sj-06.webp" alt="">
                                        </div>
                                        <h3 class="title">Redmi K30S 至尊纪念版 </h3>
                                        <p class="desc">144Hz[7档]变速高刷屏</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/sj-07.webp" alt="">
                                        </div>
                                        <h3 class="title">Redmi K30 至尊版 </h3>
                                        <p class="desc">120Hz弹出全面屏，天玑1000+旗舰处理器</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                                <li class="brick-item brick-item-m brick-item-m-2">
                                    <a href="#">
                                        <div class="figure figure-img">
                                            <img src="images/sj-08.webp" alt="">
                                        </div>
                                        <h3 class="title">腾讯黑鲨3s</h3>
                                        <p class="desc">骁龙865处理器，120Hz刷新率</p>
                                        <p class="price">
                                            <span class="num">1599</span>元
                                            <span>起</span>
                                        </p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 广告图 -->
            <div class="home-banner-box">
                <a href="#">
                    <img src="images/bann-02.webp" alt="note 9" width="1226px" height="120">
                </a>
            </div>
            <!-- 家电 -->
            <div class="home-appliances-box">
                <!-- 上 -->
                <div class="box-hd clearfix">
                    <h2 class="title fl">家电</h2>
                    <div class="more">
                        <ul class="tab-list clearfix">
                            <li>热门</li>
                            <li>电视影音</li>
                        </ul>
                    </div>
                </div>
                <!-- 下 -->
                <div class="box-bd">
                    <div class="row clearfix">
                        <div class="appliances-left fl">
                            <ul class="brick-promo-list clearfix">
                                <li class="brick-item  brick-item-m">
                                    <a href="#"><img src="images/app-01.webp" alt=""></a>
                                </li>
                                <li class="brick-item  brick-item-m">
                                    <a href="#"><img src="images/app-02.webp" alt=""></a>
                                </li>
                            </ul>
                        </div>
                        <div class="appliances-right fl">
                            <div>
                                <ul class="brick-list clearfix">
                                    <!-- 1 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-1.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 2 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-2.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 3 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-3.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 4 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-4.jpg" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 5 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-5.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 6 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-6.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 7 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-7.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 8 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-8.webp" alt="米家互联网烟灶套装（天然气）" width="80" height="80">
                                            </div>
                                            <h3 class="title">米家互联网烟灶套装（天然气）</h3>
                                            <p class="price"><span class="num">2099</span>元</p>
                                        </a>
                                    </li>
                                    <!-- 9 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="">
                                            <div class="figure figure-more">
                                                <i class="iconfont">&#xe83b;</i>
                                            </div>
                                            <div class="more">
                                                浏览更多
                                                <small>热门</small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <ul class="brick-list clearfix hide">
                                    <!-- 1 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-10.webp" alt="">
                                            </div>
                                            <h3 class="title">全面屏电视E43K</h3>
                                            <p class="desc">全面屏设计，海量内容</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 2 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-11.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 3 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-3.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 4 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-4.jpg" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 5 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-5.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 6 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-6.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 7 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-7.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 8 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-8.webp" alt="米家互联网烟灶套装（天然气）" width="80" height="80">
                                            </div>
                                            <h3 class="title">米家互联网烟灶套装（天然气）</h3>
                                            <p class="price"><span class="num">2099</span>元</p>
                                        </a>
                                    </li>
                                    <!-- 9 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="">
                                            <div class="figure figure-more">
                                                <i class="iconfont">&#xe83b;</i>
                                            </div>
                                            <div class="more">
                                                浏览更多
                                                <small>电视影音</small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 广告图 -->
            <div class="home-banner-box">
                <a href="#">
                    <img src="images/bann-03.webp" alt="note 9" width="1226px" height="120">
                </a>
            </div>
            <!-- 智能 -->
            <div class="home-appliances-box home-ability-box">
                <!-- 上 -->
                <div class="box-hd clearfix">
                    <h2 class="title fl">智能</h2>
                    <div class="more">
                        <ul class="tab-list clearfix">
                            <li>热门</li>
                            <li>安防</li>
                            <li>出行</li>
                        </ul>
                    </div>
                </div>
                <!-- 下 -->
                <div class="box-bd">
                    <div class="row clearfix">
                        <div class="appliances-left fl">
                            <ul class="brick-promo-list clearfix">
                                <li class="brick-item  brick-item-m">
                                    <a href="#"><img src="images/ai-1.webp" alt=""></a>
                                </li>
                                <li class="brick-item  brick-item-m">
                                    <a href="#"><img src="images/ai-2.webp" alt=""></a>
                                </li>
                            </ul>
                        </div>
                        <div class="appliances-right fl">
                            <div>
                                <ul class="brick-list clearfix">
                                    <!-- 1 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/ai-01.webp" alt="">
                                            </div>
                                            <h3 class="title">小米小爱音箱 Play</h3>
                                            <p class="desc">听音乐、语音遥控家电</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 2 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/ai-02.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 3 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/ai-03.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 4 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-4.jpg" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 5 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-5.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 6 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-6.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 7 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-7.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 8 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/ai-08.webp" alt="米家互联网烟灶套装（天然气）" width="80" height="80">
                                            </div>
                                            <h3 class="title">米家互联网烟灶套装（天然气）</h3>
                                            <p class="price"><span class="num">2099</span>元</p>
                                        </a>
                                    </li>
                                    <!-- 9 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="">
                                            <div class="figure figure-more">
                                                <i class="iconfont">&#xe83b;</i>
                                            </div>
                                            <div class="more">
                                                浏览更多
                                                <small>热门</small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <ul class="brick-list clearfix hide">
                                    <!-- 1 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/ai-09.webp" alt="">
                                            </div>
                                            <h3 class="title">米家智能门锁 标准锁体 碳素黑</h3>
                                            <p class="desc">一体化活体指纹识别，多种开锁方式</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 2 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/ai-10.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 3 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/ai-12.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 4 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/ai-13.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 5 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-5.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 6 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-6.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 9 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="">
                                            <div class="figure figure-more">
                                                <i class="iconfont">&#xe83b;</i>
                                            </div>
                                            <div class="more">
                                                浏览更多
                                                <small>安防</small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <ul class="brick-list clearfix hide">
                                    <!-- 1 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/ai-001.jpg" alt="">
                                            </div>
                                            <h3 class="title">小米小爱音箱 Play</h3>
                                            <p class="desc">听音乐、语音遥控家电</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 2 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/ai-003.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 3 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/ai-004.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 4 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-4.jpg" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 5 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-5.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 6 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-6.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 7 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-7.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 8 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/ai-0008.webp" alt="米家互联网烟灶套装（天然气）" width="80" height="80">
                                            </div>
                                            <h3 class="title">米家互联网烟灶套装（天然气）</h3>
                                            <p class="price"><span class="num">2099</span>元</p>
                                        </a>
                                    </li>
                                    <!-- 9 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="">
                                            <div class="figure figure-more">
                                                <i class="iconfont">&#xe83b;</i>
                                            </div>
                                            <div class="more">
                                                浏览更多
                                                <small>出行</small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 广告图 -->
            <div class="home-banner-box">
                <a href="#">
                    <img src="images/bann-04.webp" alt="note 9" width="1226px" height="120">
                </a>
            </div>
            <!-- 搭配 -->
            <div class="home-appliances-box home-match-box">
                <!-- 上 -->
                <div class="box-hd clearfix">
                    <h2 class="title fl">搭配</h2>
                    <div class="more">
                        <ul class="tab-list clearfix">
                            <li>热门</li>
                            <li>耳机音箱</li>
                        </ul>
                    </div>
                </div>
                <!-- 下 -->
                <div class="box-bd">
                    <div class="row clearfix">
                        <div class="appliances-left fl">
                            <ul class="brick-promo-list clearfix">
                                <li class="brick-item  brick-item-m">
                                    <a href="#"><img src="images/dp-1.webp" alt=""></a>
                                </li>
                                <li class="brick-item  brick-item-m">
                                    <a href="#"><img src="images/dp-2.webp" alt=""></a>
                                </li>
                            </ul>
                        </div>
                        <div class="appliances-right fl">
                            <div>
                                <ul class="brick-list clearfix">
                                    <!-- 1 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-01.webp" alt="">
                                            </div>
                                            <h3 class="title">小米真无线蓝牙耳机Air 2 Pro</h3>
                                            <p class="desc"> 主动降噪/持久续航/无线充</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 2 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-02.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 3 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-03.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 4 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-04.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 5 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-5.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 6 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-6.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 7 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-7.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 8 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-08.jpg" alt="米家互联网烟灶套装（天然气）" width="80" height="80">
                                            </div>
                                            <h3 class="title">小米蓝牙耳机AirDots青春版</h3>
                                            <p class="price"><span class="num">2099</span>元</p>
                                        </a>
                                    </li>
                                    <!-- 9 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="">
                                            <div class="figure figure-more">
                                                <i class="iconfont">&#xe83b;</i>
                                            </div>
                                            <div class="more">
                                                浏览更多
                                                <small>热门</small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <ul class="brick-list clearfix hide">
                                    <!-- 1 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-001.webp" alt="">
                                            </div>
                                            <h3 class="title">全面屏电视E43K</h3>
                                            <p class="desc">全面屏设计，海量内容</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 2 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-002.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 3 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-003.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 4 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-004.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 5 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-5.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 6 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-6.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 7 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-7.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 8 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-008.jpg" alt="米家互联网烟灶套装（天然气）" width="80" height="80">
                                            </div>
                                            <h3 class="title">小米AI音箱</h3>
                                            <p class="price"><span class="num">2099</span>元</p>
                                        </a>
                                    </li>
                                    <!-- 9 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="">
                                            <div class="figure figure-more">
                                                <i class="iconfont">&#xe83b;</i>
                                            </div>
                                            <div class="more">
                                                浏览更多
                                                <small>耳机音箱</small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 广告图 -->
            <div class="home-banner-box">
                <a href="#">
                    <img src="images/bann-05.webp" alt="note 9" width="1226px" height="120">
                </a>
            </div>
            <!-- 配件 -->
            <div class="home-appliances-box home-mountings-box">
                <!-- 上 -->
                <div class="box-hd clearfix">
                    <h2 class="title fl">配件</h2>
                    <div class="more">
                        <ul class="tab-list clearfix">
                            <li>热门</li>
                            <li>充电器</li>
                        </ul>
                    </div>
                </div>
                <!-- 下 -->
                <div class="box-bd">
                    <div class="row clearfix">
                        <div class="appliances-left fl">
                            <ul class="brick-promo-list clearfix">
                                <li class="brick-item  brick-item-m">
                                    <a href="#"><img src="images/pj-1.webp" alt=""></a>
                                </li>
                                <li class="brick-item  brick-item-m">
                                    <a href="#"><img src="images/pj-2.webp" alt=""></a>
                                </li>
                            </ul>
                        </div>
                        <div class="appliances-right fl">
                            <div>
                                <ul class="brick-list clearfix">
                                    <!-- 1 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-01.webp" alt="">
                                            </div>
                                            <h3 class="title">小米真无线蓝牙耳机Air 2 Pro</h3>
                                            <p class="desc"> 主动降噪/持久续航/无线充</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 2 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-02.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 3 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-03.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 4 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-04.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 5 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-5.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 6 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-6.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 7 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-7.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 8 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-08.jpg" alt="米家互联网烟灶套装（天然气）" width="80" height="80">
                                            </div>
                                            <h3 class="title">小米蓝牙耳机AirDots青春版</h3>
                                            <p class="price"><span class="num">2099</span>元</p>
                                        </a>
                                    </li>
                                    <!-- 9 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="">
                                            <div class="figure figure-more">
                                                <i class="iconfont">&#xe83b;</i>
                                            </div>
                                            <div class="more">
                                                浏览更多
                                                <small>热门</small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <ul class="brick-list clearfix hide">
                                    <!-- 1 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-001.webp" alt="">
                                            </div>
                                            <h3 class="title">全面屏电视E43K</h3>
                                            <p class="desc">全面屏设计，海量内容</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 2 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-002.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 3 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-003.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 4 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-004.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 5 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-5.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 6 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-6.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 7 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-7.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 8 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-008.jpg" alt="米家互联网烟灶套装（天然气）" width="80" height="80">
                                            </div>
                                            <h3 class="title">小米AI音箱</h3>
                                            <p class="price"><span class="num">2099</span>元</p>
                                        </a>
                                    </li>
                                    <!-- 9 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="">
                                            <div class="figure figure-more">
                                                <i class="iconfont">&#xe83b;</i>
                                            </div>
                                            <div class="more">
                                                浏览更多
                                                <small>耳机音箱</small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 广告图 -->
            <div class="home-banner-box">
                <a href="#">
                    <img src="images/bann-06.webp" alt="note 9" width="1226px" height="120">
                </a>
            </div>
            <!-- 周边 -->
            <div class="home-appliances-box home-rim-box">
                <!-- 上 -->
                <div class="box-hd clearfix">
                    <h2 class="title fl">周边</h2>
                    <div class="more">
                        <ul class="tab-list clearfix">
                            <li>热门</li>
                            <li>出行</li>
                        </ul>
                    </div>
                </div>
                <!-- 下 -->
                <div class="box-bd">
                    <div class="row clearfix">
                        <div class="appliances-left fl">
                            <ul class="brick-promo-list clearfix">
                                <li class="brick-item  brick-item-m">
                                    <a href="#"><img src="images/zb-1.webp" alt=""></a>
                                </li>
                                <li class="brick-item  brick-item-m">
                                    <a href="#"><img src="images/zb-2.webp" alt=""></a>
                                </li>
                            </ul>
                        </div>
                        <div class="appliances-right fl">
                            <div>
                                <ul class="brick-list clearfix">
                                    <!-- 1 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-01.webp" alt="">
                                            </div>
                                            <h3 class="title">小米真无线蓝牙耳机Air 2 Pro</h3>
                                            <p class="desc"> 主动降噪/持久续航/无线充</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 2 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-02.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 3 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-03.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 4 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-04.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 5 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-5.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 6 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-6.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 7 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-7.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 8 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-08.jpg" alt="米家互联网烟灶套装（天然气）" width="80" height="80">
                                            </div>
                                            <h3 class="title">小米蓝牙耳机AirDots青春版</h3>
                                            <p class="price"><span class="num">2099</span>元</p>
                                        </a>
                                    </li>
                                    <!-- 9 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="">
                                            <div class="figure figure-more">
                                                <i class="iconfont">&#xe83b;</i>
                                            </div>
                                            <div class="more">
                                                浏览更多
                                                <small>热门</small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <ul class="brick-list clearfix hide">
                                    <!-- 1 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-001.webp" alt="">
                                            </div>
                                            <h3 class="title">全面屏电视E43K</h3>
                                            <p class="desc">全面屏设计，海量内容</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 2 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-002.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 3 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-003.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 4 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-004.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 5 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-5.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 6 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-6.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 7 -->
                                    <li class="brick-item brick-item-m brick-item-m-2">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/app-7.webp" alt="">
                                            </div>
                                            <h3 class="title">小米全面屏电视65英寸 E65X</h3>
                                            <p class="desc">全面屏设计</p>
                                            <p class="price">
                                                <span class="num">1599</span>元
                                                <span>起</span>
                                            </p>
                                        </a>
                                    </li>
                                    <!-- 8 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="#">
                                            <div class="figure figure-img">
                                                <img src="images/dp-008.jpg" alt="米家互联网烟灶套装（天然气）" width="80" height="80">
                                            </div>
                                            <h3 class="title">小米AI音箱</h3>
                                            <p class="price"><span class="num">2099</span>元</p>
                                        </a>
                                    </li>
                                    <!-- 9 -->
                                    <li class="brick-item brick-item-s">
                                        <a href="">
                                            <div class="figure figure-more">
                                                <i class="iconfont">&#xe83b;</i>
                                            </div>
                                            <div class="more">
                                                浏览更多
                                                <small>耳机音箱</small>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 广告图 -->
            <div class="home-banner-box">
                <a href="#">
                    <img src="images/bann-07.webp" alt="note 9" width="1226px" height="120">
                </a>
            </div>
            <!-- 视频 -->
            <div class="home-mobile-box home-video-box">
                <!-- 上 -->
                <div class="box-hd">
                    <h2 class="title">视频</h2>
                    <div class="more">
                        <a href="#" class="more-link">
                            查看全部<i class="iconfont iconfont-arrow-right-big">&#xe638;</i>
                        </a>
                    </div>
                </div>
                <!-- 下 -->
                <div class="box-bd clearfix">
                    <ul class="video-list clearfix">
                        <li class="video-item">
                            <a href="#">
                                <div class="figure figure-img">
                                    <img src="images/v-01.webp" alt="Redmi 10X系列发布会" title="点击播放视频" width="296" height="180">
                                    <span class="play">
                                        <i class="iconfont">&#xe63a;</i>
                                    </span>
                                </div>
                                <h3 class="title">Redmi 10X系列发布会</h3>
                                <p class="desc">Redmi 10X系列发布会</p>
                            </a>
                        </li>
                        <li class="video-item">
                            <a href="#">
                                <div class="figure figure-img">
                                    <img src="images/v-02.webp" alt="Redmi 10X系列发布会" title="点击播放视频" width="296" height="180">
                                    <span class="play">
                                        <i class="iconfont">&#xe63a;</i>
                                    </span>
                                </div>
                                <h3 class="title">小米10 青春版 发布会</h3>
                            </a>
                        </li>
                        <li class="video-item">
                            <a href="#">
                                <div class="figure figure-img">
                                    <img src="images/v-03.webp" alt="Redmi 10X系列发布会" title="点击播放视频" width="296" height="180">
                                    <span class="play">
                                        <i class="iconfont">&#xe63a;</i>
                                    </span>
                                </div>
                                <h3 class="title">小米10 8k手机拍大片</h3>
                            </a>
                        </li>
                        <li class="video-item">
                            <a href="#">
                                <div class="figure figure-img">
                                    <img src="images/v-04.webp" alt="Redmi 10X系列发布会" title="点击播放视频" width="296" height="180">
                                    <span class="play">
                                        <i class="iconfont">&#xe63a;</i>
                                    </span>
                                </div>
                                <h3 class="title">小米10发布会</h3>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer-box">
        <div class="site-footer clearfix">
            <div class="w">
                <!-- 服务部分 -->
                <div class="footer-service">
                    <ul class="list-service clearfix">
                        <li><a href="#"><em class="iconfont">&#xe629;</em>预约维修服务</a></li>
                        <li><a href="#"><em class="iconfont">&#xe61f;</em>7天无理由退货</a></li>
                        <li><a href="#"><em class="iconfont iconfont-circle-15">&#xe606;</em>15天免费换货</a></li>
                        <li><a href="#"><em class="iconfont">&#xe633;</em>满99元包邮</a></li>
                        <li><a href="#"><em class="iconfont">&#xe632;</em>520余家售后网点</a></li>
                    </ul>
                </div>
                <!-- 友情链接 -->
                <div class="footer-links">
                    <dl class="col-links">
                        <dt>帮助中心</dt>
                        <dd><a href="#">账户管理</a></dd>
                        <dd><a href="#">购物指南</a></dd>
                        <dd><a href="#">订单操作</a></dd>
                    </dl>
                    <dl class="col-links">
                        <dt>服务支持</dt>
                        <dd><a href="#">售后政策</a></dd>
                        <dd><a href="#">自助服务</a></dd>
                        <dd><a href="#">相关下载</a></dd>
                    </dl>
                    <dl class="col-links">
                        <dt>线下门店</dt>
                        <dd><a href="#">小米之家</a></dd>
                        <dd><a href="#">服务网点</a></dd>
                        <dd><a href="#">授权体验店</a></dd>
                    </dl>
                    <dl class="col-links">
                        <dt>关于小米</dt>
                        <dd><a href="#">了解小米</a></dd>
                        <dd><a href="#">加入小米</a></dd>
                        <dd><a href="#">投资者关系</a></dd>
                        <dd><a href="#">企业社会责任</a></dd>
                        <dd><a href="#">廉洁举报</a></dd>
                    </dl>
                    <dl class="col-links">
                        <dt>关注我们</dt>
                        <dd><a href="#">新狼微博</a></dd>
                        <dd><a href="#">官方微信</a></dd>
                        <dd><a href="#">联系我们</a></dd>
                        <dd><a href="#">公益基金会</a></dd>
                    </dl>
                    <dl class="col-links">
                        <dt>特色服务</dt>
                        <dd><a href="#">F 码通道</a></dd>
                        <dd><a href="#">礼物码</a></dd>
                        <dd><a href="#">防伪查证</a></dd>
                    </dl>
                    <div class="col-contact">
                        <p class="phone">400-100-5678</p>
                        <p>8:00-18:00（仅收市话费）</p>
                        <a href="#" class="btn-small">
                            <em class="iconfont">&#xe604;</em> 人工客服
                        </a>
                        <div class="follow">
                            关注小米
                            <a href="#" class="wb"></a>
                            <a href="#" class="wx" id="J_followWx"></a>
                            <img src="images/wx-img.png" alt="" id="J_followWxImg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="site-info">
            <div class="w container clearfix">
                <div class="logo ir">小米官网</div>
                <div class="info-text">
                    <p class="sites">
                        <a href="#">小米商城</a>
                        <span>|</span>
                        <a href="#">MIUI</a>
                        <span>|</span>
                        <a href="#"> 米家</a>
                        <span>|</span>
                        <a href="#">米聊</a>
                        <span>|</span>
                        <a href="#">多看</a>
                        <span>|</span>
                        <a href="#">游戏</a>
                        <span>|</span>
                        <a href="#">政企服务</a>
                        <span>|</span>
                        <a href="#">小米天猫店</a>
                        <span>|</span>
                        <a href="#">小米集团隐私政策</a>
                        <span>|</span>
                        <a href="#">小米公司儿童信息保护规则</a>
                        <span>|</span>
                        <a href="#">小米商城隐私政策</a>
                        <span>|</span>
                        <a href="#">小米商城用户协议</a>
                        <span>|</span>
                        <a href="#">问题反馈</a>
                        <span>|</span>
                        <a href="#">Select Location</a>
                    </p>
                    <p class="sites">
                        <a href="#">北京互联网法院法律服务工作站</a>
                        <span>|</span>
                        <a href="#">中国消费者协会</a>
                        <span>|</span>
                        <a href="#">北京市消费者协会</a>
                    </p>
                    <p>
                        ©
                        <a href="#">mi.com</a> 京ICP证110507号
                        <a href="#">京ICP备10046444号</a>
                        <a href="#">京公网安备11010802020134号</a>
                        <a href="#">京网文[2020]0276-042号</a>
                        <br>
                        <a href="#">（京）网械平台备字（2018）第00005号</a>
                        <a href="#">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a>
                        <a href="#">营业执照</a>
                        <a href="#">医疗器械质量公告</a>
                        <br>
                        <a href="#">增值电信业务许可证</a> 网络食品经营备案 京食药网食备202010048
                        <a href="#">食品经营许可证</a>
                        <br> 违法和不良信息举报电话：171-5104-4404
                        <a href="#">知识产权侵权投诉</a> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                    </p>
                </div>
                <div class="info-links">
                    <a href="#"><img src="images/truste.png" alt=""></a>
                    <a href="#"><img src="images/v-logo-1.png" alt=""></a>
                    <a href="#"><img src="images/v-logo-2.png" alt=""></a>
                    <a href="#"><img src="images/fx.png" alt=""></a>
                    <a href="#" class="safe-auth  J_safeAuth"><img src="images/js-1.png" alt="" class="img1"><img src="images/js-2.png" alt="" class="img2"></a>
                </div>
            </div>
            <div class="slogan">
                <a href="tencent://message/?Menu=yes&uin=2748826916&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45">让全球每个人都能享受科技带来的美好生活</a>
            </div>
        </div>
    </div>
    <!-- 工具条 -->
    <div class="home-tool-bar">
        <a href="#" class="item">
            <div class="icon">
                <img src="images/tool-1.png" alt="" class="static"><img src="images/tool-01.png" alt="" class="hover">
            </div>
            <span class="text">手机APP</span>
            <div class="pop-content">
                <img src="images/APP.png" alt="">
                <span class="desc">
                    扫码领取新人百元礼包
                </span>
            </div>
        </a>
        <a href="/page/user/info" class="item">
            <div class="icon">
                <img src="images/tool-2.png" alt="" class="static"><img src="images/tool-02.png" alt="" class="hover">
            </div>
            <span class="text">个人中心</span>
        </a>
        <a href="#" class="item">
            <div class="icon">
                <img src="images/tool-3.png" alt="" class="static"><img src="images/tool-03.png" alt="" class="hover">
            </div>
            <span class="text">售后服务</span>
        </a>
        <a href="#" class="item">
            <div class="icon"><img src="images/tool-4.png" alt="" class="static"><img src="images/tool-04.png" alt="" class="hover"></div>
            <span class="text">人工客服</span>
        </a>
        <a href="./cart.html" class="item">
            <div class="icon"><img src="images/tool-5.png" alt="" class="static"><img src="images/tool-05.png" alt="" class="hover"></div>
            <span class="text">购物车</span>
        </a>
        <a href="#" class="item backtop" id="J_atop">
            <div class="icon">
                <img src="images/totop.png" alt="" class="static"><img src="images/totop_hover.png" alt="" class="hover">
            </div>
            <span class="text">回顶部</span>
        </a>
    </div>
</body>

<!-- 采用html , css , js 分开写的原则
这里属于自己写的 js 部分 -->

<!-- 轮播图 -->
<script src="/js/slideshow.js "></script>
<!-- 轮播图动画 -->
<script src="/js/move.js "></script>
<!-- 移动 -->
<script src="/js/roll.js "></script>
<!-- 列表 -->
<script src="/js/tab.js"></script>
<script src="/jquery-2.1.4.js"></script>
<script src="/layui/layui.js"></script>
<script src="/mylayer.js"></script>
<!-- 主页 -->
<script src="/js/index.js"></script>
<!-- 逻辑上合理 使js html css 代码进行分离 这样可以改变数据得类型 -->

<script>
    layui.use(['layer'], function () {
        var layer = layui.layer;
        $.post(
            '/category/listAll',
            function (result) {
                console.log(result);
                if (result.code == 0) {
                    $('.site-category').css('display', 'block');

                    var html = '';
                    $(result.data).each(function () {
                        html+='<li class="category-list">'
                        html+='    <a href="#" class="cat-title">'
                        html+='        ' + this.name
                        html+='        <em class="cat-icon iconfont">&#xe638;</em>'
                        html+='    </a>'
                        html+='    <!-- js -->'
                        html+='    <div class="commodity clearfix">'
                        html+='        <ul class="com-ul">'
                        $(this.childList).each(function () {
                            html+='            <li class="com-li">'
                            html+='                <a href="/page/product/list?id='+this.id+'" class="link clearfix">'
                            html+='                    <img src="images/01-1.webp" alt="" width="40" height="40"/>'
                            html+='                    <span class="text">'+this.name+'</span>'
                            html+='                </a>'
                            html+='            </li>'
                        })
                        html+='        </ul>'
                        html+='    </div>'
                        html+='</li>'
                    })


                    $('#categoryListId').append(html);

                    // 全部商品分类
                    /*var category_list = document.querySelectorAll(".category-list"),
                        commodity = document.querySelectorAll(".commodity");
                    for (var i = 0; i < category_list.length; i++) {
                        category_list[i].index = i;
                        category_list[i].onmouseover = function() {
                            for (var i = 0; i < commodity.length; i++) {
                                commodity[i].style.display = "none";
                            }
                            commodity[this.index].style.display = "block";
                            category_list[this.index].classList.add("listBcolor");

                        }
                        category_list[i].onmouseout = function() {
                            category_list[this.index].classList.remove("listBcolor");
                            commodity[this.index].style.display = "none";
                        }
                    }*/
                }
            },
            'json'
        );
    })
</script>


</html>